<template>
  <div class="activity-container">
    <el-form :inline="true"
             ref="configForm"
             :rules="strategyRule"
             label-width="150px"
             :model="form" class="demo-form-inline">
      <el-button @click="addRowHandler()">增加条件配置</el-button>
      <span>奖金层级配置，最多可添加10层记录</span>
      <div>
        <table class="config-table">
          <tr>
            <td width="100">关卡</td>
            <td width="100">累计有效投注</td>
            <td width="150">奖金金额</td>
          </tr>
          <tr v-for="(row,index) in form.levelList">
            <td width="20%">
              <el-form-item label="">
                <p>第{{row.level}}关</p>
              </el-form-item>
              <el-input v-model.number="row.level" type="hidden" @keyup.enter.native="doSave({action: 'saveForm', form: 'configForm'})"></el-input>
            </td>
            <td width="35%">
              <el-form-item label="" :prop="'levelList['+index+'].bet'" :rules="strategyRule.bet">
                <el-input v-model.number="row.bet" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configForm'})">
                  <template slot="prepend">&gt;=</template>
                </el-input>
              </el-form-item>
            </td>
            <td width="45%">
              <el-form-item label="" :prop="'levelList['+index+'].bonus'" :rules="strategyRule.amount">
                <el-input v-model.number="row.bonus" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configForm'})"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="delRowHandler(index)">删除</el-button>
              </el-form-item>
            </td>
          </tr>
        </table>
      </div>
      <el-button v-if="roleCheck('save')" type="primary" @click="doSave({action: 'saveForm', form: 'configForm'})">确定
      </el-button>
      <el-button @click="refreshForm('configForm')">取消</el-button>
    </el-form>
  </div>
</template>
<script>
import { form, factory } from '@/build';
import { saveRealBreakThroughConfig, getRealBreakThroughConfig } from '@/services/api/activity';

export default {
  name: 'real-break-through-config',

  components: {},

  mixins: [form, factory],

  data() {
    return {
      form: {
        levelList: [
          {
            level: 1,
            bet: null,
            amount: null,
          },
        ],
        periodList: [],
      },

      strategyRule: {
        bet: factory.getRule('money'),
        amount:
            factory.getRule('money'),
        // dailyProfit: factory.getRule('money'),
        // totalWithdraw: factory.getRule('money'),
        // dailyTimes: [
        //   {required: true, message: '单日提现次数不能为空'},
        //   {validator: factory.getValidator('nonNegativeInteger')}
        // ],
        // sameIPCheck: [
        //   {required: true, message: '同IP多账号检测为必选项', trigger: 'change'}
        // ],
        // sameDeviceCheck: [
        //   {required: true, message: '同设备多账号检测为必选项', trigger: 'change'}
        // ]
      },
    };
  },
  mounted() {
    this.makePeriodList();
    this.bindSave(saveRealBreakThroughConfig, 'saveForm', 'form', {});
    this.bindGet(getRealBreakThroughConfig, 'form', {
      format: (data) => {
        this.loading = false;
        let result;
        if (data) {
          result = { levelList: data.levelList, periodList: this.form.periodList };
        } else {
          result = this.form;
        }
        return result;
      },
    });
    this.getAll();
  },
  methods: {
    makePeriodList() {
      for (let i = 0; i < 12; i++) {
        this.form.periodList.push({
          startTime: moment().month(i).startOf('month').format('YYYY-MM-DD H:mm:ss'),
          endTime: moment().month(i).endOf('month').format('YYYY-MM-DD H:mm:ss'),
          period: i + 1,
        });
      }
    },
    addRowHandler() {
      this.form.levelList = this.form.levelList || [];
      if (this.form.levelList.length < 10) {
        this.form.levelList.push({
          level: this.form.levelList.length + 1,
          bet: null,
          amount: null,
        });
      } else {
        this.$message.error('最多添加10层配置');
      }
    },
    delRowHandler(from) {
      this.form.levelList.splice(from, 1);
      _.each(this.form.levelList, (item, index) => {
        if (index >= from) {
          item.level -= 1;
        }
      });
    },
    refreshForm() {
      this.resetForm('configForm');
      this.getAll();
    }
    ,
  },
};
</script>

<style scoped lang="scss">
  .config-table {
    margin: 10px;
    /*border: 1px solid #ccc;*/
    table {
      border-spacing: 0px;
      line-height: 1;
      td {
        padding: 5px 0;
      }
    }
  }
</style>
